<template>
  <div>
    <!--  头部导航栏  -->
    <div>
      <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
          background-color="#fff"
          text-color="#333"
          active-text-color="#0084ff"
          style="flex:1"
      >
        <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
          <template slot="title">
            <span> {{ item.navItem }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>

    <!--  页面title  -->
    <div class="title-css" style="text-align: center;padding: 20px 0;">
      意见查看与处理
    </div>

    <!--  意见列表  -->
    <div class="tableCenter">
      <el-table
          ref="multipleTable"
          :data="datalist"
          tooltip-effect="dark"
          style="width: 88%; margin-left: 60px"
          class="top2">
        <el-table-column
            type="index"
            label="序号"
            width="130">
        </el-table-column>
        <el-table-column
            prop="identity"
            label="用户身份"
            width="300">
        </el-table-column>

        <el-table-column
            prop="email"
            label="用户email"
            width="300">
        </el-table-column>

        <el-table-column
            prop="title"
            label="意见标题"
            width="300">
        </el-table-column>

        <el-table-column
            prop="content"
            label="意见内容"
            width="300">
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="230">
          <template slot-scope="scope">
            <div>
              <el-row>
                <el-col :span="16">
                  <el-button class="el-icon-edit" type="text" size="lager" @click="showDetail(scope.row)">查看意见详情</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button class="el-icon-edit" type="text" size="lager" @click="showAddressAdvice()">处理</el-button>
                </el-col>
                <el-col :span="12">
                  <el-popconfirm title="确定删除吗？" @confirm="deleteAdvice(scope.row)">
                    <el-button type="text" icon="el-icon-delete" slot="reference">删除</el-button>
                  </el-popconfirm>
                </el-col>
              </el-row>
            </div>


          </template>
        </el-table-column>
      </el-table>

      <!--   分页   -->
      <div class="paginationClass" style="margin-left: -30%">
        <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1" :current-page="currentPage1"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="datalist.length">
        </el-pagination>
      </div>
    </div>

    <!--  处理意见的模态框  -->
    <div class="tableCenter">
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
                 :close-on-press-escape="false">
        <div>
          <el-form :model="form" label-position="center" label-width="120px" class="edit_form">
            <el-form-item label="回信标题" prop="">
              <el-input v-model="form.title" placeholder="请输入回复用户意见的邮件标题" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="回信内容" prop="">
              <el-input type="textarea" :rows="6" v-model="form.content" placeholder="请输入回复用户意见的邮件内容" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
        </div>
        <div slot="footer" class="el-dialog--center">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addressAdvice()">确定</el-button>
        </div>·
      </el-dialog>
    </div>
    <!--  展示意见详情的模态框  -->
    <div class="tableCenter">
      <el-dialog :title="dialogTitle2" :visible.sync="dialogFormVisible2" :close-on-click-modal="false"
                 :close-on-press-escape="false">
        <div>
          <el-form :model="form" label-position="center" label-width="120px" class="edit_form">

            <el-form-item label="邮箱" prop="from">
              <el-input v-model="form.from" :disabled="true"  autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="意见标题" prop="to">
              <el-input v-model="form.to" :disabled="true"  autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="意见内容" prop="content">
              <el-input type="textarea" :rows="3"  v-model="form.content" :disabled="true"  autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          </div>
        <div slot="footer" class="el-dialog--center">
          <el-button @click="dialogFormVisible2 = false">关闭</el-button>
        </div>
      </el-dialog>
        </div>

  </div>
</template>

<script>
export default {
  name: "suggestion",
  data(){
    return{
      // 列表数据
      datalist:[{
        identity: '游客',
        email: 'xxx@xxx.com',
        title: 'xxx',
        content: 'xxx'
      }],
      dialogTitle: "处理意见",
      dialogFormVisible: false,
      dialogTitle2: "意见详情",
      dialogFormVisible2: false,
      // 导航栏数据
      navList:[
        {name:'/admin/contentReview', navItem:'内容审核机制'},
        {name:'/admin/suggestion',navItem:'意见查看与处理'}
      ],
      // 表单数据
      form:{
        title:'',
        content:''
      },
      // 系统功能
      features: [],

      // 实现分页
      total1: 0,
      currentPage1: 1,
      pageSize: 10,

    }
  },
  created() {
    // 初始化页面

  },
  methods: {
    handleSelect(key, keyPath) {
    },

    // 分页
    handleSizeChange1: function (pageSize) { // 每页条数切换
      this.pageSize = pageSize
      this.currentPage1 = 1;
    },

    handleCurrentChange1: function (currentPage) {//页码切换
      this.currentPage1 = currentPage;
    },

    // 展示处理意见的模态框
    showAddressAdvice(){

      // 展示模态框
      this.dialogFormVisible = true;
    },

    // 处理意见
    addressAdvice(){

      // 关闭模态框
      this.dialogFormVisible = false;

    },
    // 展示意见详情, 这里简化为模态框展示
    showDetail(row){
      this.form = row
      this.dialogFormVisible2 = true;
    },

  }
}
</script>

<style scoped>
.title-css {
  font-size: 25px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
}
.tableCenter{
  text-align: center;
  margin-top: 50px;
}
.edit_form {
  width: 460px;
  margin: 0 auto;
}
</style>